<script setup lang="ts">
import { inject, nextTick, onMounted, reactive, ref, watch } from 'vue';

import { ElInfoFilled, ElQuestionFilled } from '@vben/icons';
import { cloneDeep } from '@vben/utils';

import { StorageManager } from '@vben-core/shared/cache';

import {
  ElAlert,
  ElCol,
  ElCollapse,
  ElCollapseItem,
  ElIcon,
  ElInput,
  ElMessage,
  ElOption,
  ElRadio,
  ElRadioGroup,
  ElRow,
  ElSelect,
  ElSlider,
  ElSwitch,
  ElTooltip,
} from 'element-plus';

import { rasterServiceApi } from '#/api';
import { usePublicStore } from '#/store';
import { getRampUrl } from '#/utils';

const storageManager = new StorageManager({
  prefix: '',
  storageType: 'sessionStorage',
});

const publicStore = usePublicStore();

const currentLayer = inject('currentSelectedLayer') as any;
const activeNames = ref(['renderParams']);
// const gradualValueRender = new GradualValueRender()
// const basedRule = ref('global')
const bandList = ref<Array<number>>([1]); // 波段列表
// const fieldUniqueValues = ref<Array<any>>(); // 储存唯一值数组
// const gradualValueRender = new GradualValueRender(); // 调用渐变值渲染方法
// const hierarchicalRender = new HierarchicalRender(); // 调用分级的分级函数
const loadingOptions = ref(false);

interface ColorRampItem {
  id: number;
  label: string;
  value: string;
}
const colorRamp = ref('gray');
const colorRampSelect = ref(); // 用于获取下拉框dom
const colorRampList = ref<Array<ColorRampItem>>([
  {
    id: 1,
    label: 'gray',
    value: 'gray',
  },
  {
    id: 2,
    label: 'jet',
    value: 'jet',
  },
  {
    id: 3,
    label: 'viridis',
    value: 'viridis',
  },
  {
    id: 4,
    label: 'inferno',
    value: 'inferno',
  },
  {
    id: 5,
    label: 'cividis',
    value: 'cividis',
  },
  {
    id: 6,
    label: 'hot',
    value: 'hot',
  },
  {
    id: 7,
    label: 'gist_earth',
    value: 'gist_earth',
  },
  {
    id: 8,
    label: 'terrain',
    value: 'terrain',
  },
  {
    id: 9,
    label: 'cubehelix',
    value: 'cubehelix',
  },
  {
    id: 10,
    label: 'ocean',
    value: 'ocean',
  },
  {
    id: 11,
    label: 'brg',
    value: 'brg',
  },
  {
    id: 12,
    label: 'gist_stern',
    value: 'gist_stern',
  },
  {
    id: 13,
    label: 'CMRmap',
    value: 'CMRmap',
  },
  {
    id: 14,
    label: 'gist_earth_r',
    value: 'gist_earth_r',
  },
]);
const singleBandRasterOptions = reactive({
  layer: currentLayer.value,
  band: 1,
  ramp: colorRamp,
  type: 'ramp', // 有了样式库，后续去掉该属性
  layout: {
    visibility: 'visible',
  },
  paint: {
    'raster-opacity': 100, // 最后需要转到0-1
    'raster-saturation': 0, // 最后需要转到0-1
    'raster-contrast': 0, // 最后需要转到0-1
    'raster-resampling': 'linear',
  },
  isShade: false,
  shadeParams: {
    mode: 'hsv',
    azdeg: 315, // 方位角
    altdeg: 45, // 高度角
    vert_exag: 1, // 垂直拉伸系数
  },
  colorMap: [] as any,
  // enhancementMethod: 'Normalize',//增强方式
  // gammaValue: 2
}) as any;
watch(
  singleBandRasterOptions,
  () => {
    publicStore.setRenderOptions(singleBandRasterOptions);
  },
  {
    deep: true,
  },
);

const handleColorRampSelectChange = (val: any) => {
  // 如果当前已选择字段，改变色带选择将重新绘制图例
  // if (field.value) {
  //   drawLegend()
  // }
  // const colors = gradualValueRender.getColorRampArray(val, 2)
  // const imageSrc = getRampImage(colors);

  if (
    singleBandRasterOptions.isShade &&
    singleBandRasterOptions.shadeParams.mode === 'hillshade' &&
    val !== 'gray'
  ) {
    ElMessage.warning('hillshade模式仅支持灰度色带渲染！');
    colorRamp.value = 'gray';
    return;
  }
  let img = null;
  colorRampList.value.forEach((item: any) => {
    if (item.value === val) {
      img = getRampUrl(item.value);
    }
  });

  colorRampSelect.value.$el.children[0].children[0].children[1].setAttribute(
    'style',
    `
        background: url(${img}) no-repeat;
				background-position: 10px center;
				background-size: 220px 20px;
				text-indent: 240px;
				`,
  );
};

const renderParamsReturn = () => {
  // 此处需要深拷贝，否则会使singleBandRasterOptions的对象参数与currentLayer.value的对象参数挂钩，导致互相影响
  // const renderParams = JSON.parse(JSON.stringify(currentLayer.value.renderParams))
  const renderParams = currentLayer.value.templateParams
    ? cloneDeep(currentLayer.value.templateParams)
    : cloneDeep(currentLayer.value.renderParams);
  delete currentLayer.value.templateParams;

  Object.keys(renderParams).forEach((key) => {
    singleBandRasterOptions[key] = renderParams[key];
  });
};

// 请求当前图层波段
const requestBands = async () => {
  loadingOptions.value = true;
  const res = await rasterServiceApi.getBandCount(
    storageManager.getItem<string>('userId') as string,
    currentLayer.value.source,
  );
  for (let i = 2; i <= res; i++) {
    bandList.value.push(i);
  }
  loadingOptions.value = false;
};

// const getRampImage = (colors: any) => {
//   const canvas = document.querySelector('#gradient-canvas') as any;
//   const ctx = canvas.getContext('2d');
//   // 清空画布
//   ctx.clearRect(0, 0, canvas.width, canvas.height);

//   // 创建渐变对象
//   const grad = ctx.createLinearGradient(0, 0, canvas.width, 0);
//   grad.addColorStop(0, colors[0]);
//   grad.addColorStop(1, colors[1]);

//   // 绘制渐变线条
//   ctx.fillStyle = grad;
//   ctx.fillRect(0, 0, canvas.width, canvas.height);

//   // 将画布转换为 base64 编码的图像数据
//   return canvas.toDataURL();
// };
// const handleColorChange = (val: any) => {
//   const canvas = document.querySelector('#gradient-canvas') as any;
//   const ctx = canvas.getContext('2d');
//   // 清空画布
//   ctx.clearRect(0, 0, canvas.width, canvas.height);

//   // 创建渐变对象
//   const grad = ctx.createLinearGradient(0, 0, canvas.width, 0);
//   const stepSize = 1 / (singleBandRasterOptions.colorMap.length - 1);

//   // 添加颜色停止点
//   for (let i = 0; i < singleBandRasterOptions.colorMap.length; i++) {
//     grad.addColorStop(i * stepSize, singleBandRasterOptions.colorMap[i].color);
//   }
//   // 绘制渐变线条
//   ctx.fillStyle = grad;
//   ctx.fillRect(0, 0, canvas.width, canvas.height);
//   const imageSrc = canvas.toDataURL();
//   colorRampSelect.value.$el.children[0].children[0].children[1].setAttribute(
//     'style',
//     `
//         background: url(${imageSrc}) no-repeat;
// 				background-position: 10px center;
// 				background-size: 220px 20px;
// 				text-indent: 240px;
// 				`,
//   );
// };

// // 根据选择的字段获取其中的唯一值
// const handleFieldSelectChange = (val: any) => {
//   // console.log(currentLayer.value.layerName);
//   geoFileApi
//     .getUniqueValues(currentLayer.value.sourceLayer, val, '')
//     .then((res: any) => {
//       if (res.code === 200) {
//         fieldUniqueValues.value = res.data;
//         if (singleBandRasterOptions.type === 'ramp') {
//           getBreakPoints();
//         }
//         nextTick(() => {
//           // drawLegend()
//           // 里面包含了drawLegend()
//           handleColorRampSelectChange(colorRamp.value);
//         });
//       }
//     });
// };
const handleTypeChange = (val: any) => {
  // if (field.value) {
  //   if (val === 'ramp') getBreakPoints()
  //   nextTick(() => {
  //     //里面包含了drawLegend()
  //     handleColorRampSelectChange(colorRamp.value)
  //     // drawLegend()
  //   })
  // }

  if (val === 'template') {
    ElMessage.warning('暂未开放');
    singleBandRasterOptions.type = 'ramp';
  }
  nextTick(() => {
    // 里面包含了drawLegend()
    handleColorRampSelectChange(colorRamp.value);
    // drawLegend()
  });
};
const handleInput = (val: any, param: any, warningMessage: string) => {
  const shadeParams = singleBandRasterOptions.shadeParams; // 浅拷贝
  // 限制只能输入数字
  shadeParams[param] = String(shadeParams[param]).replaceAll(/\D/g, '');
  if (param === 'azdeg' && (val > 360 || val === '')) {
    ElMessage.warning(warningMessage);
    shadeParams[param] = 0;
  }
  if (param === 'altdeg' && (val > 90 || val === '')) {
    ElMessage.warning(warningMessage);
    shadeParams[param] = 0;
  }
};
const handleNumberInput = (val: any) => {
  // 限制只能输入数字
  singleBandRasterOptions.shadeParams.vert_exag = String(
    singleBandRasterOptions.shadeParams.vert_exag,
  ).replaceAll(/\D/g, '');
  if (!val) {
    ElMessage.warning('请输入非负整数');
    singleBandRasterOptions.shadeParams.vert_exag = 0;
  }
};
// input(type='color')只支持16进制颜色值，不支持rgb(0,0,0),需要进行转换
// const rgbToHex = (rgb: string) => {
//   const values = rgb
//     .substring(rgb.indexOf('(') + 1, rgb.lastIndexOf(')'))
//     .split(',');
//   const r = Number.parseInt(values[0]);
//   const g = Number.parseInt(values[1]);
//   const b = Number.parseInt(values[2]);
//   const hex = `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
//   return hex;
// };
// type=ramp下获取断点
// const getBreakPoints = () => {
//   const breakPoints = hierarchicalRender.getBreakPointArr(
//     fieldUniqueValues.value,
//     4,
//   );
//   singleBandRasterOptions.colorMap = []; // 清空存储
//   const colorList = gradualValueRender.getColorRampArray(colorRamp.value, 5);
//   singleBandRasterOptions.colorMap.push({
//     quality: fieldUniqueValues.value![0],
//     color: colorList[0],
//   });
//   for (const [i, breakPoint] of breakPoints.entries()) {
//     singleBandRasterOptions.colorMap.push({
//       quality: breakPoint,
//       color: colorList[i + 1],
//     });
//   }
//   singleBandRasterOptions.colorMap.push({
//     quality: fieldUniqueValues.value![fieldUniqueValues.value!.length - 1],
//     color: colorList[4],
//   });
// };
// type=values下获取每个像素的颜色
// const getPixelValues = () => {
//   singleBandRasterOptions.colorMap = []; // 清空存储
//   const colorList = gradualValueRender.getColorRampArray(
//     colorRamp.value,
//     fieldUniqueValues.value!.length,
//   );
//   for (let i = 0; i < fieldUniqueValues.value!.length; i++) {
//     singleBandRasterOptions.colorMap.push({
//       quality: fieldUniqueValues.value![i],
//       color: rgbToHex(colorList[i]),
//     });
//   }
// };

// const drawLegend = () => {
//   if (singleBandRasterOptions.type === 'ramp') {
//     const canvases = document.querySelectorAll('.legend');
//     const colorList = gradualValueRender.getColorRampArray(
//       colorRamp.value,
//       canvases.length,
//     );
//     for (const [i, canvase] of canvases.entries()) {
//       singleBandRasterOptions.colorMap[i].color = colorList[i];
//       drawPolygon(
//         canvase as HTMLCanvasElement,
//         singleBandRasterOptions.colorMap[i].color,
//       );
//     }
//   } else {
//     getPixelValues();
//   }
// };
// const drawEntry = () => {
//   drawLegend();
// };

// const drawPolygon = (canvas: HTMLCanvasElement, color: string) => {
//   // let canvas = document.getElementById('graphPreview') as any
//   const context = canvas.getContext('2d') as any;
//   context.clearRect(0, 0, canvas.width, canvas.height);

//   const size = Math.min(canvas.width, canvas.height) * 0.8;
//   const x = (canvas.width - size) / 2;
//   const y = (canvas.height - size) / 2;
//   context.globalAlpha = singleBandRasterOptions.paint['raster-opacity'] / 100;
//   // context.fillStyle = singleColor.value;
//   context.fillStyle = color;
//   // context.strokeStyle = '#000000';
//   // context.lineWidth = 1;

//   context.fillRect(x, y, size, size);
//   // context.strokeRect(x, y, size, size);
// };
onMounted(() => {
  const { renderType, templateParams } = currentLayer.value;
  //  当原先渲染方式是该方式时，或现在渲染方式是来自于模板时，需要参数恢复（赋值）
  if (renderType[1] === 'singleBandRasterRender' || templateParams) {
    renderParamsReturn();
  }
  handleColorRampSelectChange(singleBandRasterOptions.ramp);
  requestBands();
  publicStore.setRenderOptions(singleBandRasterOptions);
});
</script>

<template>
  <div class="all">
    <ElRow class="itemRow">
      <ElCol :span="4">
        <span class="label-style"> 波段： </span>
      </ElCol>
      <ElCol :span="20">
        <ElSelect
          size="small"
          v-model="singleBandRasterOptions.band"
          placeholder="请选择波段"
          style="width: 100%"
          :loading="loadingOptions"
          loading-text="加载中..."
        >
          <ElOption
            v-for="item in bandList"
            :key="item"
            :label="item"
            :value="item"
          />
        </ElSelect>
      </ElCol>
    </ElRow>
    <ElRow class="itemRow">
      <ElCol :span="4">
        <span class="label-style"> 渲染类型： </span>
      </ElCol>
      <ElCol :span="20">
        <div>
          <ElRadioGroup
            v-model="singleBandRasterOptions.type"
            @change="handleTypeChange"
            size="small"
          >
            <ElRadio label="ramp" style="padding-bottom: 5px">
              色带渐变
            </ElRadio>
            <ElRadio label="template" style="padding-bottom: 5px">
              基础模板
            </ElRadio>
            <!-- <el-radio label="values" style="padding-bottom: 5px;">逐像元</el-radio> -->
          </ElRadioGroup>
        </div>
      </ElCol>
    </ElRow>
    <ElAlert
      :title="
        singleBandRasterOptions.type === 'ramp'
          ? '用于定量数据，在所提供的颜色值之间提供平滑的插值'
          : '用于定性数据，每个像元值都有一个颜色值对应（可编辑）'
      "
      :closable="false"
      type="info"
      center
      style="height: 25px"
    />
    <!-- 预览暂不考虑 -->
    <!-- <el-row class="itemRow preview">
      <el-col :span="4">
        <span class="label-style">
          预览：
        </span>
      </el-col>
      <el-col :span="20" v-show="singleBandRasterOptions.colorMap.length">
        <el-table :data="singleBandRasterOptions.colorMap" style="width: 100%;" max-height="170">
          <el-table-column label="颜色" width="200">
            <template #default="scope">
              <div id="canvasContainer" v-if="singleBandRasterOptions.type === 'ramp'">
                <canvas width="60" height="20" class="legend"></canvas>
              </div>
              <div id="colorContainer" v-else>
                <el-input class="colorInput" v-model="singleBandRasterOptions.colorMap[scope.$index]['color']"
                  @input="handleColorChange" type="color" style="width: 33px;height: 26px">
                </el-input>
              </div>
            </template>
</el-table-column>
<el-table-column prop="quality" :label="singleBandRasterOptions.type === 'ramp' ? '分隔点' : '像元值'" width="200" />
</el-table>
</el-col>
</el-row> -->
    <ElRow class="itemRow">
      <ElCol :span="24">
        <ElCollapse v-model="activeNames" accordion>
          <ElCollapseItem title="渲染参数" name="renderParams">
            <ElRow class="itemRow">
              <ElCol :span="4">
                <span class="label-style"> 颜色： </span>
              </ElCol>
              <ElCol :span="20">
                <ElSelect
                  ref="colorRampSelect"
                  @change="handleColorRampSelectChange"
                  v-model="colorRamp"
                  placeholder="请选择输入色带"
                  style="width: 100%"
                  size="small"
                >
                  <canvas
                    id="gradient-canvas"
                    width="30"
                    height="5"
                    v-show="false"
                  ></canvas>
                  <ElOption
                    v-for="item in colorRampList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                    <ElRow type="flex" :gutter="20" justify="center">
                      <ElCol :span="18">
                        <img
                          :src="getRampUrl(item.value)"
                          style="float: left; height: 30px"
                        />
                      </ElCol>
                      <ElCol :span="6">
                        <span>{{ item.label }}</span>
                      </ElCol>
                    </ElRow>
                  </ElOption>
                </ElSelect>
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="6">
                <span class="label-style"> 不透明度： </span>
              </ElCol>
              <ElCol :span="18">
                <ElSlider
                  v-model.number="
                    singleBandRasterOptions.paint['raster-opacity']
                  "
                  show-input
                  size="small"
                />
              </ElCol>
            </ElRow>
          </ElCollapseItem>
          <ElCollapseItem title="影像增强" name="imageEnhancement">
            <!-- <el-row class="itemRow">
              <el-col :span="4">
                <span class="label-style">
                  增强方式：
                </span>
              </el-col>
              <el-col :span="20">
                <div class="my-2 flex items-center text-sm">
                  <el-radio-group v-model="singleBandRasterOptions.enhancementMethod" @change="" class="ml-4">
                    <el-radio label="Normalize">正常化</el-radio>
                    <el-radio label="Histogram">直方图</el-radio>
                    <el-radio label="GammaValue">γ值</el-radio>
                  </el-radio-group>
                </div>
              </el-col>
            </el-row>
            <el-row class="itemRow" v-if="singleBandRasterOptions.enhancementMethod === 'GammaValue'">
              <el-col :span="4">
                <span class="label-style">
                  输入γ值：
                </span>
              </el-col>
              <el-col :span="20">
                <el-input @input="" v-model.number="singleBandRasterOptions.gammaValue" placeholder="Please input">
                </el-input>
              </el-col>
            </el-row> -->
            <ElRow class="itemRow">
              <ElCol :span="4">
                <span class="label-style"> 采样方式： </span>
              </ElCol>
              <ElCol :span="20">
                <ElRadioGroup
                  v-model="singleBandRasterOptions.paint['raster-resampling']"
                  @change="handleTypeChange"
                  size="small"
                >
                  <ElRadio label="linear" style="padding-bottom: 5px">
                    线性
                  </ElRadio>
                  <ElRadio label="nearest" style="padding-bottom: 5px">
                    最近邻
                  </ElRadio>
                </ElRadioGroup>
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="6">
                <span class="label-style"> 饱和度： </span>
              </ElCol>
              <ElCol :span="18">
                <ElSlider
                  v-model.number="
                    singleBandRasterOptions.paint['raster-saturation']
                  "
                  show-input
                  :min="-100"
                  size="small"
                />
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="6">
                <span class="label-style"> 对比度： </span>
              </ElCol>
              <ElCol :span="18">
                <ElSlider
                  v-model.number="
                    singleBandRasterOptions.paint['raster-contrast']
                  "
                  show-input
                  :min="-100"
                  size="small"
                />
              </ElCol>
            </ElRow>
          </ElCollapseItem>
          <ElCollapseItem title="地形阴影" name="hillshade">
            <ElRow class="itemRow">
              <ElCol :span="8">
                <span class="label-style">
                  <div style="display: flex; align-items: center">
                    <span>
                      {{
                        singleBandRasterOptions.isShade ? '关闭' : '开启'
                      }}地形阴影效果：
                    </span>
                    <ElTooltip
                      effect="dark"
                      content="增强地形数据的阴影效果，请确保渲染的为地形数据"
                      placement="top"
                    >
                      <ElIcon>
                        <ElQuestionFilled />
                      </ElIcon>
                    </ElTooltip>
                  </div>
                </span>
              </ElCol>
              <ElCol :span="16">
                <ElSwitch v-model="singleBandRasterOptions.isShade" />
              </ElCol>
            </ElRow>
            <ElRow class="itemRow" v-if="singleBandRasterOptions.isShade">
              <ElCol :span="4">
                <span class="label-style"> 混合模式： </span>
              </ElCol>
              <ElCol :span="20">
                <ElRadioGroup
                  v-model="singleBandRasterOptions.shadeParams.mode"
                  size="small"
                >
                  <ElRadio label="hsv" style="padding-bottom: 5px">
                    hsv
                  </ElRadio>
                  <ElRadio label="overlay" style="padding-bottom: 5px">
                    overlay
                  </ElRadio>
                  <ElRadio label="soft" style="padding-bottom: 5px">
                    soft
                  </ElRadio>
                  <ElRadio
                    :disabled="colorRamp !== 'gray'"
                    label="hillshade"
                    style="padding-bottom: 5px"
                  >
                    hillshade
                  </ElRadio>
                </ElRadioGroup>
              </ElCol>
            </ElRow>
            <ElAlert
              v-if="
                singleBandRasterOptions.isShade &&
                singleBandRasterOptions.shadeParams.mode === 'hillshade'
              "
              title="该模式下仅支持以灰度色带（gray）渲染"
              type="info"
              center
            />
            <ElRow class="itemRow" v-if="singleBandRasterOptions.isShade">
              <ElCol :span="4">
                <span class="label-style"> 方位角： </span>
              </ElCol>
              <ElCol :span="20">
                <ElInput
                  @input="
                    (val: any) =>
                      handleInput(
                        val,
                        'azdeg',
                        '请输入有效的方位角（0-360度之间）',
                      )
                  "
                  v-model.number="singleBandRasterOptions.shadeParams.azdeg"
                  placeholder="请输入方位角"
                  size="small"
                >
                  <template #append>度</template>
                </ElInput>
              </ElCol>
            </ElRow>
            <ElRow class="itemRow" v-if="singleBandRasterOptions.isShade">
              <ElCol :span="4">
                <span class="label-style"> 高度角： </span>
              </ElCol>
              <ElCol :span="20">
                <ElInput
                  @input="
                    (val: any) =>
                      handleInput(
                        val,
                        'altdeg',
                        '请输入有效的高度角（0-90度之间）',
                      )
                  "
                  v-model.number="singleBandRasterOptions.shadeParams.altdeg"
                  placeholder="请输入高度角"
                  size="small"
                >
                  <template #append>度</template>
                </ElInput>
              </ElCol>
            </ElRow>
            <ElRow class="itemRow" v-if="singleBandRasterOptions.isShade">
              <ElCol :span="4">
                <span class="label-style">
                  <div style="display: flex; align-items: center">
                    <span>Z因子</span>
                    <ElTooltip
                      effect="dark"
                      content="垂直拉伸系数"
                      placement="bottom"
                    >
                      <ElIcon>
                        <ElInfoFilled />
                      </ElIcon>
                    </ElTooltip>
                    <span>：</span>
                  </div>
                </span>
              </ElCol>
              <ElCol :span="20">
                <ElInput
                  @input="handleNumberInput"
                  v-model.number="singleBandRasterOptions.shadeParams.vert_exag"
                  placeholder="请输入Z因子"
                  size="small"
                />
              </ElCol>
            </ElRow>
          </ElCollapseItem>
        </ElCollapse>
      </ElCol>
    </ElRow>
  </div>
</template>

<style scoped>
.all {
  width: 100%;
}

.itemRow {
  width: 100%;
  padding: 5px;
}

.preview {
  height: 170px;
}

.el-input {
  width: 100%;
}

.label-style {
  font-size: 15px;
}

.colorInput {
  caret-color: transparent;
}

/* 去除图例中input的边框 */

/* :deep(#colorContainer .el-input__wrapper) {
  box-shadow: none;
} */

:deep(.colorInput .el-input__inner:hover) {
  cursor: pointer;
}

:deep(.el-table .el-table__cell) {
  text-align: center;
}

:deep(.el-table:not(.el-table--border) .el-table__cell) {
  border: none;

  /* 去除表格边框 */
}

:deep(.el-table--small .cell) {
  height: 25px;
  padding: 0 4px;
}

:deep(.el-collapse-item__header) {
  font-size: 15px;
  font-weight: 600;
}

:deep(.el-alert__title) {
  font-size: 13px;
}
</style>
